import 'package:flutter/material.dart';
import 'package:hospitable_rental/models/general_type.dart';
import 'package:hospitable_rental/viewmodels/filter_bar_viewmodel.dart';
import 'package:hospitable_rental/widgets/form_item/common_title.dart';
import 'package:provider/provider.dart';

class FliterDrawer extends StatelessWidget {
  final VoidCallback? onSubmit;

  const FliterDrawer({Key? key, this.onSubmit}) : super(key: key);

  _onChanged(BuildContext context, String? value) {
    context.read<FilterBarViewModel>().selectedListToggleItem(value);
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: SafeArea(
        child: Stack(
          children: [
            ListView(
              children: [
                CommonTitle("户型"),
                FliterDrawerItem(
                  list: context.read<FilterBarViewModel>().roomTypeList,
                  selectedIds: context.watch<FilterBarViewModel>().selectedList.toList(),
                  onChanged: (value) => _onChanged(context, value),
                ),
                CommonTitle("朝向"),
                FliterDrawerItem(
                  list: context.read<FilterBarViewModel>().orientedList,
                  selectedIds: context.watch<FilterBarViewModel>().selectedList.toList(),
                  onChanged: (value) => _onChanged(context, value),
                ),
                CommonTitle("楼层"),
                FliterDrawerItem(
                  list: context.read<FilterBarViewModel>().floorList,
                  selectedIds: context.watch<FilterBarViewModel>().selectedList.toList(),
                  onChanged: (value) => _onChanged(context, value),
                ),
              ],
            ),
            Positioned(
              left: 10.0,
              right: 10.0,
              bottom: 30.0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                      context.read<FilterBarViewModel>().resetSelectedList();
                    },
                    child: Container(
                      alignment: Alignment.center,
                      width: 80.0,
                      height: 50.0,
                      child: Text(
                        "取消",
                        style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.w500,
                          color: Colors.white,
                        ),
                      ),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                  ),
                  SizedBox(width: 10.0),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                      if (onSubmit != null) {
                        onSubmit!();
                      }
                    },
                    child: Container(
                      alignment: Alignment.center,
                      width: 80.0,
                      height: 50.0,
                      child: Text(
                        "确定",
                        style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.w500,
                          color: Colors.white,
                        ),
                      ),
                      decoration: BoxDecoration(
                        color: Theme.of(context).primaryColor,
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class FliterDrawerItem extends StatelessWidget {
  final List<GeneralType> list;
  final List<String> selectedIds;
  final ValueChanged<String?>? onChanged;

  const FliterDrawerItem({
    Key? key,
    this.list = const [],
    this.selectedIds = const [],
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Wrap(
        spacing: 10.0,
        runSpacing: 10.0,
        children: list.map((item) {
          bool isActive = selectedIds.contains(item.id);
          return GestureDetector(
            onTap: () {
              if (onChanged != null) onChanged!(item.id);
            },
            behavior: HitTestBehavior.translucent,
            child: Container(
              width: 80.0,
              height: 40.0,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: isActive ? Theme.of(context).primaryColor : Colors.white,
                border: Border.all(color: Theme.of(context).primaryColor),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Text(
                item.name ?? "",
                style: TextStyle(
                  color: isActive ? Colors.white : Colors.grey,
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}
